<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <top-view-card :title="'累计销售额'" :cardValue="'￥ 32,039,165'">
          <div class="compare-wrapper">
            <div class="compare">
              <span>日同比 </span>
              <span class="emphasis">7.33%</span>
              <div class="increase" />
            </div>
            <div class="compare">
              <span>月同比 </span>
              <span class="emphasis">38.79%</span>
              <div class="decrease" />
            </div>
          </div>
          <template #total>
            <span>昨日销售额 </span>
            <span class="emphasis">￥ 30,000,000</span>
          </template>
        </top-view-card>
      </el-col>
      <el-col :span="6">
        <top-view-card :title="'累计订单量'" :cardValue="'2,157,420'">
          <template>
            <v-chart :options="ordersChart()"></v-chart>
          </template>
          <template #total>
            <span>昨日订单量 </span>
            <span class="emphasis">2,000,000</span>
          </template>
        </top-view-card>
      </el-col>
      <el-col :span="6">
        <top-view-card :title="'今日交易用户数'" :cardValue="'81,014'">
          <template>
            <v-chart :options="usersChart()"></v-chart>
          </template>
          <template #total>
            <span>退货率 </span>
            <span class="emphasis">5.14%</span>
          </template>
        </top-view-card>
      </el-col>
      <el-col :span="6">
        <top-view-card :title="'累计用户数'" :cardValue="'1,087,503'">
          <template>
            <v-chart :options="totalUsersChart()"></v-chart>
          </template>
          <template #total>
            <div class="total-users-class">
              <span>日同比 </span>
              <span class="emphasis">8.73%</span>
              <div class="increase" />
              <span>&nbsp;&nbsp;&nbsp;月同比 </span>
              <span class="emphasis">35.91%</span>
              <div class="decrease" />
            </div>
          </template>
        </top-view-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TopViewCard from './TopViewCard.vue'
export default {
  name: 'TopView',
  components: {
    TopViewCard
  },
  methods: {
    ordersChart () {
      return {
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          show: false
        },
        series: [{
          type: 'line',
          data: [620, 432, 220, 534, 790, 430, 220, 320, 532, 320, 834, 690, 530, 220, 620],
          areaStyle: {
            color: 'purple'
          },
          lineStyle: {
            width: 0
          },
          itemStyle: {
            opacity: 0
          },
          smooth: true
        }],
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        }
      }
    },
    usersChart () {
      return {
        color: ['#3398DB'],
        series: [{
          type: 'bar',
          data: [410, 82, 200, 334, 390, 330, 220, 150, 82, 200, 134, 290, 330, 150],
          barWidth: '60%'
        }],
        xAxis: {
          type: 'category',
          data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00'],
          show: false
        },
        yAxis: {
          show: false
        },
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        }
      }
    },
    totalUsersChart () {
      return {
        series: [{
          type: 'bar',
          data: [200],
          barWidth: 10,
          stack: '总量',
          itemStyle: {
            color: '#45c946'
          }
        }, {
          type: 'bar',
          data: [250],
          stack: '总量',
          itemStyle: {
            color: '#eee'
          }
        }, {
          type: 'custom',
          data: [200],
          stack: '总量',
          renderItem: (params, api) => {
            const value = api.value([0])
            const endPoint = api.coord([value, 0])

            return {
              type: 'group',
              position: endPoint,
              children: [{
                type: 'path',
                shape: {
                  d: 'M1024 255.966 511.971 767.909 0 255.996 1024 255.996z',
                  x: -5,
                  y: -15,
                  width: 10,
                  height: 10,
                  Layout: 'cover'
                },
                style: {
                  fill: '#45c946'
                }
              }, {
                type: 'path',
                shape: {
                  d: 'M512 341.333333l-298.666667 298.666667h597.333334z',
                  x: -5,
                  y: 5,
                  width: 10,
                  height: 10,
                  Layout: 'cover'
                },
                style: {
                  fill: '#45c946'
                }
              }]
            }
          }
        }],
        xAxis: {
          type: 'value',
          max: 'dataMax',
          show: false
        },
        yAxis: {
          type: 'category',
          show: false
        },
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.compare-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .compare {
    margin-top: 3px;
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
  }
}
.total-users-class {
  display: flex;
  align-items: center;
}
</style>
